﻿<!DOCTYPE html>
<html lang="ru">
<head>

    <meta charset="UTF-8">
    <title>Привратник 2024</title>
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">

</head>
<body>

<nav class="navbar navbar-expand navbar-dark bg-dark bg-gradient">
    <div class="container-fluid">

        <a class="navbar-brand" href="https://irklib.ru" target="_blank">
            <img src="img/gatekeeper.png" alt="Логотип">
            ГБУК ИОГУНБ
        </a>

        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse" data-bs-target="#navbarContent"
                aria-controls="navbarText" aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarContent">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <!-- текущеее время -->
                <li class="nav-item">
                    <a class="nav-link fs-5 text-light" href="http://time.is/" id="clock">
                        ВРЕМЯ
                    </a>
                </li>

                <!-- версия программы -->
                <li class="nav-item">
                    <a class="nav-link" href="http://arsmagna.ru/"  id="version">
                        Привратник 2024
                    </a>
                </li>

                <!-- кнопка перехода в полноэкранный режим -->
                <li class="nav-item">
                    <a class="nav-link" href="#" onclick="return turnFullscreen()">
                        <img src="img/fullscreen.png" width="32" height="32"
                            alt="Полноэкранный режим" title="Полноэкранный режим">
                    </a>
                </li>

                <!-- Кнопка для проверки связи с сервером ИРБИС64 -->
                <li class="nav-item">
                    <a class="nav-link" href="#" onclick="return testConnection()">
                        <img src="img/irbis.png" width="32" height="32"
                             alt="Проверка связи с сервером ИРБИС64"
                             title="Проверка связи с сервером ИРБИС64">
                    </a>
                </li>

            </ul>

        </div>

    </div>
</nav>

<div class="container-fluid">

    <!-- Думаю, не отвлекайте! -->
    <div id="thinking" class="row" style="display: none;">

        <div class="col bg-warning">

            <div class="text-center">
                <img src="img/working-small.gif" alt="Думаю!"/>
                <span class="fs-4">Думаю, не отвлекайте!</span>
            </div>

        </div>

    </div>

</div>

<div class="container">

    <div class="row mt-3">

        <!-- Зона для отображения сообщений  -->
        <div class="col-9">

            <!-- иконки -->
            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </symbol>
                <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                </symbol>
                <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                </symbol>
            </svg>

            <!-- Заголовок -->
            <h4>
                Сообщения

                <!-- Кнопка временного запрета "бип-бип" -->
                <!--
                <input class="btn-check" type="checkbox" value="" id="silence-box">
                <label class="btn btn-outline-primary btn-sm" for="silence-box">
                    <img src="img/silent.svg" height="16" width="16"
                         alt="Тишина" title="Тишина">
                </label>
                -->

                <a href="/#" onclick="return sayOk()">
                    <img src="img/hand-palm.svg" height="16" width="16"
                         alt="Понятно" title="Понятно">
                </a>

            </h4>

            <!-- Собственно сообщение -->
            <div id="alert-box" class="alert alert-info">
                <div>
                    <svg id="success-icon" display="none" class="bi flex-shrink-0 me-2" width="32" height="32"
                         role="img" aria-label="Success:">
                        <use xlink:href="#check-circle-fill"/>
                    </svg>
                    <svg id="error-icon" display="none" class="bi flex-shrink-0 me-2" width="32" height="32"
                         role="img" aria-label="Danger:">
                        <use xlink:href="#exclamation-triangle-fill"/>
                    </svg>
                    <span id="message-text" class="fs-3 text-success"></span>
                </div>
            </div>

        </div>

        <!-- Зона для отображения статистики -->
        <div class="col-3">
            <h4>Статистика
                <a href="#" onclick="return updateStat()">
                    <img src="img/refresh.svg" height="16" width="16"
                         alt="Обновить" title="Обновить">
                </a>
            </h4>
            <table class="table table-info">
                <tbody id="stat">
                <tr>
                    <td>Посещений</td>
                    <td>--</td>
                </tr>
                <tr>
                    <td>В библиотеке</td>
                    <td>--</td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>

    <div class="row mt-3">

        <!-- Зона для отображения истории входов-выходов  -->
        <div class="col">
            <h4>История
                <a href="#" onclick="return updateHistory()">
                    <img src="img/refresh.svg" height="16" width="16"
                         alt="Обновить" title="Обновить">
                </a>
            </h4>
            <table class="table table-info w-100">
                <thead>
                <tr>
                    <th scope="col">Вход</th>
                    <th scope="col">Выход</th>
                    <th scope="col">Билет</th>
                    <th scope="col">Читатель</th>
                </tr>
                </thead>
                <tbody id="history">
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>Пока нет данных</td>
                    <td>&nbsp;</td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>

</div>

<script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/axios.min.js"></script>

<script>

    function setThinking(on) {
        let thinkingBox = document.getElementById('thinking')
        thinkingBox.style.display = on ? 'block' : 'none'
    }

    function setMessage(success, message) {
        let alertBox = document.getElementById('alert-box')
        let messageText = document.getElementById('message-text')
        let successIcon = document.getElementById('success-icon')
        let errorIcon = document.getElementById('error-icon')
        alertBox.className = success
                ? 'alert alert-success'
                : 'alert alert-danger'
        messageText.innerText = message
        successIcon.style.display = success ? 'inline' : 'none'
        errorIcon.style.display = success ? 'none' : 'inline'
    }

    function addTD(tr, text) {
        let td = document.createElement('td')
        td.innerText = text
        tr.appendChild(td)
        return tr
    }

    function updateHistory() {
        let historyBody = document.getElementById('history')
        historyBody.innerHTML = ''
        setThinking(true)
        axios.get('/api/history')
                .then(function (response) {
                    let counter = 0
                    response.data.forEach(function (obj) {
                        const tr = document.createElement('tr');
                        addTD(tr, obj.in)
                        addTD(tr, obj.out)
                        addTD(tr, obj.ticket)
                        addTD(tr, obj.name)
                        historyBody.appendChild(tr)
                        counter++
                    })

                    if (counter === 0) {
                        const tr = document.createElement('tr');
                        addTD(tr, '--')
                        addTD(tr, '--')
                        addTD(tr, 'Пока нет данных о посещениях')
                        addTD(tr, '--')
                        historyBody.appendChild(tr)
                    }
                })
                .catch(function () {
                    setMessage(false, 'Ошибка связи с сервером веб-приложения')
                })
                .finally(function () {
                    setThinking(false)
                })
        return false
    }

    function testConnection() {
        setThinking(true)
        setMessage('Проверяем связь с сервером ИРБИС64')
        axios.get('/api/test')
                .then(function () {
                    console.log('Проверка связи с сервером ИРБИС64')
                })
                .catch(function () {
                    setMessage(false, 'Ошибка связи с сервером веб-приложения')
                })
                .finally(function () {
                    setThinking(false)
                })
        return false
    }

    // сообщаем на сервер, что мы прочитали сообщение об ошибке
    function sayOk() {
        axios.get('/api/ok')
        return false
    }

    function updateStat() {
        let statBody = document.getElementById('stat')
        statBody.innerHTML = ''
        setThinking(true)
        axios.get('/api/stat')
                .then(function (response) {
                    let counter = 0
                    response.data.forEach(function (obj) {
                        let tr = document.createElement('tr')
                        addTD(tr, obj.title)
                        let value = document.createElement('td')
                        value.className = 'fw-bold'
                        value.innerText = obj.value
                        tr.appendChild(value)
                        statBody.appendChild(tr)
                        counter++
                    })

                    if (counter === 0) {
                        let tr = document.createElement('tr')
                        addTD(tr, '')
                        addTD(tr, 'Пока статистика не накопилась')
                        statBody.appendChild(tr)
                    } else {
                        setMessage(true, 'Получена статистика')
                    }
                })
                .catch(function () {
                    setMessage(false, 'Ошибка связи с сервером веб-приложения')
                })
                .finally(function () {
                    setThinking(false)
                })
        return false
    }

    // издает короткий "бип"
    function makeBeep() {
        // кнопка временно убрана, поэтому проверять ее нет смысла
        // const silence = document.getElementById("silence-box")
        // if (silence.checked) {
        //    return
        // }

        const snd = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=")
        snd.play()

        return false
    }

    // переход в полноэкранный режим
    function turnFullscreen() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
        } else if (document.exitFullscreen) {
            document.exitFullscreen();
        }

        return false
    }

    setInterval(() => {
                // выводим текущее время
                document.getElementById('clock').innerText = new Date().toLocaleTimeString()

                axios.get('/api/state')
                        .then(function (response) {
                            const data = response.data
                            setMessage(!data.error, data.message)
                            if (data.error) {
                                makeBeep()
                            }
                        })
                        .catch(function () {
                            setMessage(false, 'Ошибка связи с сервером веб-приложения')
                            makeBeep()
                        })
            },
            1000)

    setTimeout(() => {
            axios.get('/api/version')
                .then(function (response) {
                    const data = response.data
                    const version = document.getElementById('version')
                    version.innerText = version.innerText + ' (' + data + ')'
                })
        },
        100)

</script>

</body>
</html>
